<template>
  <div class="search-main">
    <div class="search-main-box">
      <div class="search-box">
        <div>
          <Input
            search
            enter-button
            size="large"
            v-model="params.keyword"
            placeholder="请输入关键字"
            @on-search="search"
          />
          <div class="search-total">
            已查询到 <span>{{ total || 0 }}</span> 条数据
          </div>
        </div>
      </div>
      <Scroll class="search-content" :on-reach-bottom="handleReachBottom">
        <Tabs v-model="params.resourceType" id="top" @on-click="search">
          <TabPane label="课程" name="course_series">
            <ul class="list-box" v-if="params.resourceType == 'course_series'">
              <li
                class="list-item"
                v-for="item in dataList"
                :key="item.title"
                @click="handleDetail(item, 'course_series')"
              >
                <div class="list-head">
                  <img :src="item.coverImg" />
                </div>
                <div class="list-text">
                  <p class="name">{{ item.resourceName }}</p>
                  <div class="teacher-box">
                    <div class="teacher-face">
                      <img :src="item.coverImg" />
                      <span>{{ item.createByName }} </span>
                    </div>
                  </div>
                  <p class="look">{{ item.buyCount || 0 }}人看过</p>
                  <div class="pricer" v-if="item.unitPrice">
                    {{ `￥${item.unitPrice}` }}
                  </div>
                  <div class="priceg" v-else>免费</div>
                </div>
              </li>
            </ul>
          </TabPane>
          <TabPane label="专家" name="expert">
            <div v-if="params.resourceType == 'expert'">
              <div
                class="attention-card"
                v-for="item in dataList"
                :key="item.resourceId"
                @click="handleDetail(item, 'expert')"
              >
                <div v-if="!item.headImg" class="head-face">
                  <img
                    src="@/assets/images/default_bg.png"
                    style="width: 100%; height: 100%"
                  />
                </div>
                <div
                  class="head-face"
                  v-else
                  :style="`background-image:url(${item.headImg})`"
                ></div>

                <div class="attention-info">
                  <div class="head-box">
                    <p class="name">{{ item.resourceName }}</p>
                    <div class="score">
                      <img
                        src="@/assets/online_consulting/score.png"
                        alt=""
                        class="score-face"
                      />
                      <span>{{ item.scoreAvg }}</span>
                    </div>
                    <span>
                      在线问诊
                      <span class="price"
                        >¥ {{ item.consultPrice || "0.0" }}</span
                      >
                    </span>
                    <span>
                      线下预约
                      <span class="price"
                        >¥ {{ item.registerPrice || "0.0" }}</span
                      >
                    </span>
                  </div>
                  <div class="addr">
                    <span> <Icon type="md-pin" />{{ item.address }}</span>
                    <span class="details">
                      详情
                      <Icon type="ios-arrow-forward" />
                    </span>
                  </div>
                  <p class="infor">擅长 {{ item.domain || "暂无" }}</p>
                </div>
              </div>
            </div>
          </TabPane>
          <TabPane label="场地" name="site">
            <ul class="list-box" v-if="params.resourceType == 'site'">
              <li
                class="list-item"
                v-for="item in dataList"
                :key="item.resourceId"
                @click="handleDetail(item, 'site')"
              >
                <div class="list-head">
                  <img :src="item.coverImg" />
                </div>
                <div class="list-text">
                  <p class="name">{{ item.resourceName }}</p>
                  <div class="teacher-box">
                    <div class="teacher-face">
                      <span
                        >{{
                          item.intro.length > 200
                            ? item.intro.slice(0, 200) + "..."
                            : item.intro
                        }}
                      </span>
                    </div>
                  </div>
                  <p class="look"><Icon type="md-pin" />{{ item.address }}</p>
                </div>
              </li>
            </ul>
          </TabPane>
          <TabPane label="实践实训基地" name="training_base">
            <div v-if="params.resourceType == 'training_base'">
              <div
                class="base-card"
                v-for="(item, index) in dataList"
                :key="index"
                @click="handleDetail(item, 'training_base')"
              >
                <div class="base-face">
                  <div class="score-bg">{{ item.scoreAvg }}分</div>
                  <img :src="item.coverImg" />
                </div>
                <div class="information">
                  <span class="base-name">{{ item.resourceName }}</span>
                  <div class="introduce">
                    <div>
                      {{
                        item.intro.length > 200
                          ? item.intro.slice(0, 200) + "..."
                          : item.intro
                      }}
                    </div>
                  </div>
                  <div class="remaining">
                    <div><Icon type="md-pin" />{{ item.address }}</div>
                    <div>
                      <span v-if="item.unitPrice != 0" class="pricer"
                        >￥{{ item.unitPrice }}/小时</span
                      >
                      <span v-else class="priceg">免费</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </TabPane>
          <TabPane label="资讯" name="information">
            <div class="content" v-if="params.resourceType == 'information'">
              <div
                class="news-item"
                v-for="(v, i) in dataList"
                :key="i"
                @click="handleDetail(v, 'information')"
              >
                <div v-if="v.buyCount == 1" class="content-main">
                  <img :src="v.coverImg" class="smallImg" />
                  <div class="content-main-right">
                    <div class="content-top">
                      <div>{{ v.resourceName }}</div>
                      <div class="newsinfo">
                        <div>
                          <span>{{ v.createByName }}</span
                          ><span>{{ v.releaseTime | format }}</span>
                        </div>
                        <div>{{ v.commentNum || 0 }}评论</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="v.buyCount == 3" class="content-top">
                  <div>{{ v.resourceName }}</div>
                  <div class="newsinfo">
                    <div>
                      <span>{{ v.createByName }}</span
                      ><span>{{ v.releaseTime | format }}</span>
                    </div>
                    <div>{{ v.commentNum || 0 }}评论</div>
                  </div>
                </div>
              </div>
            </div>
          </TabPane>
        </Tabs>
        <div class="back-up" @click="handleUp">
          <Icon type="md-arrow-up" title="回到顶部" />
        </div>
      </Scroll>
    </div>
  </div>
</template>
<script>
import { getSearchPage } from "@/api/index.js";
export default {
  name: "search",
  data() {
    return {
      params: {
        page: 1,
        rows: 10,
        keyword: "", //关键词
        resourceType: "course_series", //类型
      },
      dataList: [],
      total: 0, //总数
    };
  },
  filters: {
    format(v) {
      let date = "--/--/--";
      if (v) date = new Date(parseInt(v)).format("yyyy-MM-dd HH:mm:ss");
      return date;
    },
  },
  mounted() {
    this.search();
  },
  methods: {
    // 搜索
    search() {
      this.params.page = 0;
      this.dataList = [];
      this.handleReachBottom();
    },
    // 跳转详情
    handleDetail(v, type) {
      // 跳转有问题，暂时注释
      let name = "";
      let query = {};
      if (type == "course_series") {
        // 课程
        let { unitPrice, resourceId, resourceName } = v;
        name = "course_detail";
        query = {
          isCharge: unitPrice == 0 ? 0 : 1,
          payStatus: unitPrice == 0 ? "PAID" : "UNPAID",
          id: resourceId,
          name: resourceName,
        };
      }
      if (type == "expert") {
        //专家
        name = "expertRegister";
        query = { id: v.resourceId };
      }
      if (type == "site") {
        // 场地
        name = "site_detail";
        query = { detailContent: JSON.stringify({ id: v.resourceId }) };
      }
      if (type == "training_base") {
        // 基地
        name = "base_detail";
        query = {
          tab: encodeURIComponent("概览"),
          disabled: v.buyCount == 0,
          id: v.resourceId,
        };
      }
      if (type == "information") {
        // 资讯
        name = v.buyCount == 1 ? "information" : "healthScienceDetails";
        query = { id: v.resourceId };
      }
      this.$router.push({ name, query });
    },
    // 更多加载
    handleReachBottom() {
      this.params.page++;
      return new Promise((resolve) => {
        getSearchPage(this.params).then(({ result, success }) => {
          if (success) {
            let list = result.dataList;
            if (
              this.params.resourceType == "site" ||
              this.params.resourceType == "training_base"
            ) {
              list.forEach((i) => {
                i.intro = i.intro.replace(
                  /<p[^>]*>|<\/p>|<div[^>]*>|<\/div[^>]*>|<a[^>]*>|<\/a>/gi,
                  ""
                );
              });
            }
            this.dataList = this.dataList.concat(list);
            this.total = parseInt(result.total);
            if (this.total == this.dataList.length) {
              if (this.params.page > 1) {
                this.$Message.info("已无更多消息");
              }
            }
            resolve();
          }
        });
      });
    },
    // 回到顶部
    handleUp() {
      let temp = document.getElementById("top");
      temp.scrollIntoView({ block: "start", behavior: "smooth" });
    },
  },
};
</script>
<style lang="scss" scoped>
.search-main {
  width: 100%;
  background-color: #fff;
  &-box {
    margin: 0 auto;
    width: 75rem;
    .search-box {
      height: 12.5rem;
      > div {
        width: 31.25rem;
        margin: auto;
        padding: 5.25rem 0;
        .search-total {
          font-size: 0.875rem;
          margin-top: 0.625rem;
          span {
            color: green;
          }
        }
      }
    }
    .search-content {
      height: calc(100vh - 13rem);
      position: relative;
      overflow-y: auto;
      .back-up {
        position: absolute;
        right: 1.875rem;
        width: 3.125rem;
        height: 3.125rem;
        line-height: 3.125rem;
        text-align: center;
        bottom: 30px;
        border-radius: 50%;
        font-size: 1rem;
        color: #ffffff;
        background-color: #ff3c2a;
        &:hover {
          cursor: pointer;
          background-color: #ff867b;
        }
      }
      ::v-deep .ivu-scroll-container {
        height: auto !important;
        max-height: calc(100vh - 13rem);
        overflow: hidden auto;
      }
      // 课程 场地
      .list-box {
        .list-item {
          position: relative;
          padding: 0.9375rem 1.25rem;
          border-bottom: 1px solid #ddd;
          display: flex;
          &:hover {
            cursor: pointer;
            background-color: #f5f5f5;
          }
          .list-head {
            width: 20%;
            height: 9.375rem;
            border-radius: 0.25rem;
            overflow: hidden;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .list-text {
            margin-left: 1.25rem;
            flex: 1;
            position: relative;
            .name {
              font-size: 1rem;
              font-weight: bold;
              color: #333333;
              margin-bottom: 0.625rem;
              cursor: pointer;
            }
            .teacher-box {
              padding: 30px 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .teacher-face {
                display: flex;
                align-items: center;
                > img {
                  width: calc(24 / 1920 * 100vw);
                  height: calc(24 / 1920 * 100vw);
                  border-radius: calc(12 / 1920 * 100vw);
                }
                > span {
                  font-size: calc(12 / 1920 * 100vw);
                  color: #63676e;
                  margin-left: calc(6 / 1920 * 100vw);
                }
              }
            }
            .pricer {
              position: absolute;
              right: 0;
              font-size: 1.125rem;
              color: #ff5c58;
            }
            .priceg {
              position: absolute;
              right: 0;
              font-size: 1.125rem;
              color: #5dd6c9;
            }
            .desc {
              color: #a1a1a1;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .look {
              position: absolute;
              bottom: 0;
            }
          }
        }
      }
      // 专家
      .attention-card {
        display: flex;
        align-items: center;
        border-radius: 0.25rem;
        border-bottom: 0.0625rem solid #f8f8f8;
        padding: 1.1875rem 1.4375rem;
        margin-bottom: 0.625rem;
        &:hover {
          cursor: pointer;
          background-color: #f5f5f5;
        }
        .head-face {
          width: 86px;
          height: 86px;
          border-radius: 4px;
          background-size: cover;
        }
        .attention-info {
          width: 700px;
          margin-left: 20px;
          line-height: 28px;
          flex: 1;
          .name {
            display: flex;
            align-items: center;
            font-size: 18px;
            color: #333333;
          }
          .addr {
            font-size: 0.875rem;
            margin: 5px 0;
          }
          .infor {
            color: #9a9a9a;
            max-width: 60%;
            overflow: hidden !important; //溢出内容隐藏
            text-overflow: ellipsis !important; //文本溢出部分用省略号表示
            display: -webkit-box !important; //特别显示模式
            -webkit-line-clamp: 1 !important; //行数
            line-clamp: 1 !important;
            -webkit-box-orient: vertical !important; //盒子中内容竖直排列
          }
          .score {
            margin: 0 8px;
            display: inline-flex;
            align-items: center;
            .score-face {
              width: 0.75rem;
              height: 13px;
            }
            > span {
              font-size: 0.875rem;
              margin-left: 4px;
            }
          }
          .describe {
            color: #9a9a9a;
            font-size: 14px;
            text-overflow: -o-ellipsis-lastline !important;
            overflow: hidden !important; //溢出内容隐藏
            text-overflow: ellipsis !important; //文本溢出部分用省略号表示
            display: -webkit-box !important; //特别显示模式
            -webkit-line-clamp: 2 !important; //行数
            line-clamp: 2 !important;
            -webkit-box-orient: vertical !important; //盒子中内容竖直排列
          }
        }
        .head-box {
          display: flex;
          align-items: center;
          color: #9a9a9a;
          > span {
            font-size: 14px;
            margin-right: 16px;
          }
          .price {
            color: #fd5151;
          }
        }
        .attention-btn {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 84px;
          height: 34px;
          background: #fd5151;
          color: #fff;
          font-size: 14px;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      // 基地
      .base-card {
        width: 100%;
        height: 10.625rem;
        padding: 1.25rem;
        display: flex;
        &:hover {
          cursor: pointer;
          background-color: #f5f5f5;
        }
        .base-face {
          width: 10rem;
          height: 8.125rem;
          border-radius: 0.3125rem;
          overflow: hidden;
          position: relative;
          img {
            width: auto;
            height: 100%;
            object-fit: cover;
          }
          .score-bg {
            position: absolute;
            width: 4.6875rem;
            height: 1.75rem;
            background-color: rgba(0, 0, 0, 0.5);
            border-bottom-right-radius: 0.625rem;
            font-size: 0.875rem;
            color: #fff;
            text-align: center;
            line-height: 1.75rem;
          }
        }
        .information {
          margin-left: 1.25rem;
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
          .base-name {
            font-size: 1rem;
            color: #333;
          }
          .introduce {
            font-size: 0.875rem;
            color: #999999;
            .detail {
              color: #333333;
              cursor: pointer;
              border-bottom: 0.0625rem solid #333333;
            }
          }
          .remaining {
            width: 50rem;
            display: flex;
            justify-content: space-between;
            span {
              font-size: 0.875rem;
              color: #f4333c;
              margin-left: 0.25rem;
            }
            .pricer {
              margin-left: 0.75rem;
              color: #f4333c;
              font-size: 1rem;
            }
            .priceg {
              margin-left: 0.75rem;
              font-size: 1rem;
              color: #5dd6c9;
            }
          }
        }
      }

      .news-item {
        display: flex;
        flex-direction: column;
        border-bottom: 0.0625rem solid #ececec;
        padding: 1.25rem;
        &:hover {
          cursor: pointer;
          background-color: #f5f5f5;
        }
        .content-top {
          font-size: 1.375rem;
          min-height: 7.5rem;
          height: 100%;
          position: relative;
          .newsinfo {
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            font-size: 1.125rem;
            color: #babbbc;
            width: 100%;
            margin-bottom: 1.25rem;
            span {
              margin-right: 1.25rem;
            }
          }
        }
        .content-main {
          display: flex;
          .smallImg {
            width: 18.75rem;
            height: 10rem;
            object-fit: cover;
            border-radius: 0.625rem;
            margin-right: 1.5rem;
          }
          .content-main-right {
            flex: 1;
            height: 10rem;
            color: #2c2c2c;
            font-size: 1.125rem;
          }
        }
      }
    }
  }
}
</style>
